<template>
  <div class="CustomVantTimerRange">
    <div class="selectInp">
      <div v-if="hasLabel" class="inpLabel">{{ label }}：</div>
      <div
        class="inpInner"
        :style="{ width: width,
                  color:vantStartTimeText ==='开始时间' && vantEndTimeText==='结束时间' ? '#C8C9CC' : '#323233' }"
        @click="openTimePicker"
      >
        <div class="startText">{{ vantStartTimeText }}</div>
        {{ separator }}
        <div class="endText">{{ vantEndTimeText }}</div>
        <i class="el-icon-caret-bottom" />
      </div>
    </div>
    <van-popup
      v-model="vantTimerShow"
      position="bottom"
      get-container="body"
      class="vantTimePopUp"
      :close-on-click-overlay="showStartPicker"
      :class="{'year-picker ':type==='年'}"
    >
      <div class="vantDateTimeSecondBox">
        <van-datetime-picker
          v-show="showStartPicker"
          v-model="vantStartTimeValue"
          :type="dateTimePickerType"
          title="开始时间"
          :style="{ height: '300px' }"
          :formatter="formatter"
          @confirm="onStartTimeConfirm"
          @cancel="vantTimerShow=false"
        />
        <van-datetime-picker
          v-show="!showStartPicker"
          v-model="vantEndTimeValue"
          :type="dateTimePickerType"
          cancel-button-text="　"
          title="结束时间"
          :style="{ height: '300px' }"
          :min-date="minEndDateValue"
          :formatter="formatter"
          @confirm="onEndTimeConfirm"
        />
      </div>
      <div class="px-3 py-2 border-top">
        <van-button type="danger" class="w-100" @click="onTimeClear">清空</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { formatTime, timeToArray } from '@/utils/dayJs'

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    label: {
      type: String,
      default: '时间区间'
    },
    hasLabel: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: '年月日'
    },
    start: {
      type: [String, Date],
      default: ''
    },
    end: {
      type: [String, Date],
      default: ''
    },
    minDate: {
      type: [String, Date],
      default: ''
    },
    maxDate: {
      type: [String, Date],
      default: ''
    },
    separator: {
      type: String,
      default: '至'
    }
  },
  data() {
    return {
      vantTimerShow: false,
      vantStartTimeText: '开始时间',
      vantEndTimeText: '结束时间',
      vantStartTimeValue: '',
      vantEndTimeValue: '',
      showStartPicker: true,
      minEndDateValue: new Date(2014, 0, 1)
    }
  },
  computed: {
    dateTimePickerType() {
      let type
      if (this.type === '年') {
        type = 'date'
      } else if (this.type === '年月') {
        type = 'year-month'
      } else if (this.type === '年月日') {
        type = 'date'
      } else if (this.type === '年月日时') {
        type = 'datehour'
      } else {
        type = 'datetime'
      }
      return type
    }
  },
  watch: {
    start() {
      this.initTime()
    },
    end() {
      this.initTime()
    }
  },
  mounted() {
    this.initTime()
  },
  methods: {
    initTime() {
      this.vantStartTimeText = this.start !== '' ? formatTime(this.start, this.type) : '开始时间'
      this.vantEndTimeText = this.end !== '' ? formatTime(this.end, this.type) : '结束时间'
    },
    openTimePicker() {
      this.vantTimerShow = true
      // 开始|结束时间赋值
      this.vantStartTimeValue = this.start !== '' ? new Date(...timeToArray(this.start)) : new Date()
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      if (type === 'hour') {
        return val + '时'
      }
      if (type === 'minute') {
        return val + '分'
      }
      return val
    },
    onStartTimeConfirm(val) {
      this.showStartPicker = false
      this.vantStartTimeText = formatTime(val, this.type)
      this.minEndDateValue = new Date(...timeToArray(formatTime(val, this.type)))
      this.vantEndTimeValue = this.end !== '' ? new Date(...timeToArray(this.end)) : new Date()
    },
    onEndTimeConfirm(val) {
      this.vantTimerShow = false
      this.showStartPicker = true
      this.vantEndTimeText = formatTime(val, this.type)
      this.$emit('update:start', formatTime(this.vantStartTimeValue, this.type))
      this.$emit('update:end', formatTime(val, this.type))
      this.$emit('confirm', {
        start: formatTime(this.vantStartTimeValue, this.type),
        end: formatTime(val, this.type)
      })
    },
    onTimeClear() {
      this.showStartPicker = true
      this.vantTimerShow = false
      this.vantStartTimeText = '开始时间'
      this.vantEndTimeText = '结束时间'
      this.$emit('update:start', '')
      this.$emit('update:end', '')
      this.$emit('confirm', {
        start: '',
        end: ''
      })
    }
  }
}
</script>

<style lang="scss">
.CustomVantTimerRange {
  width: auto;
  height: 35px;
  .selectInp {
    display: flex;
    align-items: center;
    .inpLabel {
      font-size: 14px;
      flex-shrink: 0;
    }
    .inpInner {
      border: 1px solid #e9e9e9;
      height: 35px;
      border-radius: 3px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: pointer;
      color: #323233;
      span {
        margin-right: 10px;
      }
      .startText,.endText{
        text-align: center;
        flex: 1;
      }
    }
  }
}
// 年
.year-picker {
  .van-picker {
    .van-picker__columns {
      .van-picker-column:not(:first-child) {
        display: none;
      }
    }
  }
}
</style>
